<script setup>
	import {ref, reactive} from 'vue'
    import menuApi from '@/api/sys/menu'

    //列表
    const viewData = reactive({
        tableData: []
    })

    const initData = () => {
        menuApi.getMenuTree().then(response => {
            viewData.tableData = response.data
        })
    }
    initData()

    //删除
    import { ElMessage, ElMessageBox } from 'element-plus'
    const deleteHandler = (id) => {
        ElMessageBox.confirm('确认删除该菜单吗?', '警告',
            {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}
        ).then(() => {
            menuApi.deleteById(id).then(response => {
                ElMessage({type: 'success',message: '操作成功',})
                initData()
            })
        }).catch(() => {
        })
    }

    //新增/编辑
    import Edit from './edit.vue'
    const editDrawer = ref(false)
    const editRef = ref(null)
    const editHandler = (id) => {
        editDrawer.value = true
        //调用子组件的init方法
        editRef.value.init(id)
    }

    //提供给子组件去调用的方法
    //hasChange为true，需要更新列表，
    const closeHandler = (hasChange) => {
        editDrawer.value = false
        if (hasChange) {
            initData()
        }
    }

</script>

<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-button type="primary" @click="editHandler(null)">新增</el-button>
			</el-form-item>
		</el-form>

		<el-table
				:data="viewData.tableData"
				style="width: 100%;margin-bottom: 20px;"
				row-key="id"
				border
				stripe>

			<el-table-column prop="title" label="名称" sortable width="180"></el-table-column>
			<el-table-column prop="perms" label="权限编码" sortable width="180"></el-table-column>
			<el-table-column prop="icon" label="图标"></el-table-column>
			<el-table-column prop="type" label="类型">
				<template #default="scope">
					<el-tag size="small" v-if="scope.row.type === 0">目录</el-tag>
					<el-tag size="small" v-if="scope.row.type === 1" type="success">菜单</el-tag>
					<el-tag size="small" v-if="scope.row.type === 2" type="info">按钮</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="path" label="菜单URL"></el-table-column>
			<el-table-column prop="component" label="菜单组件" width="220"></el-table-column>
			<el-table-column prop="sortOrder" label="排序号" width="80"></el-table-column>
			<el-table-column prop="status" label="状态" width="80">
				<template #default="scope">
					<el-tag size="small" type="success" v-if="scope.row.status === 0">正常</el-tag>
					<el-tag size="small" type="danger" v-if="scope.row.status === 1">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="text" @click="editHandler(scope.row.id)">编辑</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-button type="text" @click="deleteHandler(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

	</div>

    <Edit ref="editRef" :editDrawer="editDrawer" :tableData="viewData.tableData" @closeHandler="closeHandler"></Edit>

</template>
